import React, {Component, PropTypes} from 'react';
import {View, StyleSheet, Image, Text} from 'react-native';
import {screenWidth} from './MyExports.js';

/**
 * 近半小时热门列表ListView的Item布局
 * Created by 10691 on 17/5/5.
 */
export default class CommunalHotCellItem extends Component {

    static PropTypes = {
        image: PropTypes.string,
        title: PropTypes.string,
    };

    render() {
        return (
            <View style={CommunalHotCellItemStyles.container}>

                {/*左边商品图片(当未加载出来时显示默认图片)*/}
                <Image source={{uri: this.props.image === '' ? 'default_thumb_250x250' : this.props.image}}
                       style={CommunalHotCellItemStyles.imageStyle}/>

                {/*中间商品介绍*/}
                <Text numberOfLines={3} style={CommunalHotCellItemStyles.titleStyle}>{this.props.title}</Text>

                {/*右边的箭头*/}
                <Image source={{uri: 'icon_cell_rightArrow'}} style={CommunalHotCellItemStyles.arrowStyle}/>

            </View>
        )
    }
}

const CommunalHotCellItemStyles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        width: screenWidth,
        height: 100,
        backgroundColor: 'white',
        borderBottomWidth: 0.5,
        borderBottomColor: 'gray',
        alignItems: 'center',
        justifyContent: 'space-between',
    },

    imageStyle: {
        width: 80,
        height: 80,
        marginLeft: 10,
    },

    titleStyle: {
        width: screenWidth * 0.65,
        marginLeft: 10,
    },

    arrowStyle: {
        width: 10,
        height: 10,
        marginRight: 10,
    }
});

